<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/view/common/easycommon.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>教课书管理界面</title>
    <meta charset="utf-8">
    <style>
    	table{font-size:14px}
    </style>
    <script>
    $(function(){
    	
/*     	$.parser.onComplete=function(){
    		alert('解析结束');
    	} */
    	
 	   $('#pp').pagination({
 	         //      total:2000,
 	               pageSize:20,
 	               pageNumber:1,
 	               pageList:[10,20,30],
 	               loading:true,
 	/*                buttons:[{
 	               	iconCls:'icon-add',
 	   				handler:function(){
 	   					alert('add');
 	   				}
 	               }],
 	               showPageList:true,
 	               showRefresh:true,
 	               beforePageText:'页数',
 	               afterPageText:'页数 {pages}',
 	               displayMsg:'页数 {from} to {to} of {total} items',
 	               onSelectPage:function(pageNumber,pageSize){
 	               	alert(pageNumber+'__'+pageSize);
 	               },
 	           	   onBeforeRefresh:function(pageNumber,pageSize){
 	               	alert(pageNumber+'__'+pageSize);
 	               },
 	               onRefresh:function(pageNumber,pageSize){
 	               	alert(pageNumber+'__'+pageSize);
 	               },
 	               onChangePageSize:function(pageSize){
 	               	alert(pageSize);
 	               } */
 	           }); 
    	
    	var datagrid; //定义全局变量datagrid
        var editRow = undefined; //定义全局变量：当前编辑的行
 //       using('datagrid', function(){
        datagrid = $('#protable').datagrid({
    		rownumbers:true,
    		singleSelect:true,
    		pagination:true,
    		singleSelect:false,
    		fit: true, //datagrid自适应宽度
            fitColumn: false, //列自适应宽度
            striped: true, //行背景交换
            nowap: true, //列内容多时自动折至第二行
            border: false,
            idField: 'id', //主键
    		url:"${path}/assist/queryCourseTextbook",
    		columns:[[
				{field:'id', title: '编号', width: 100, sortable: true, checkbox: true },
    			{field:'book_title',title:'书名',width:120,'sortable':true,editor:{ type: 'validatebox', options: { required: true} }},
    			{field:'author',title:'作者',width:120,editor:{ type: 'validatebox', options: { required: false} }},
    			{field:'book_type',title:'类型',width:200,editor:{ type: 'validatebox',options: { required: false} }},
    			{field:'book_bh',title:'编号',width:120,editor:{ type: 'validatebox', options: { required: false} }},
    			{field:'publish_company',title:'出版社',width:120,editor:{ type: 'validatebox', options: { required: false} }},
    			{field:'price',title:'价格',width:120,editor:{ type: 'validatebox',options: { required: false} }},
    			{field:'publication_date',title:'出版日期',width:120,editor:{ type: 'validatebox', options: { required: false} }},
    			{field:'photo_url',title:'图片',width:120,editor:{ type: 'validatebox', options: { required: false} }},
    		]],
    		queryParams: { action: 'query' }, //查询参数
            toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () {//添加列表的操作按钮添加，修改，删除等
                //添加时先判断是否有开启编辑的行，如果有则把开户编辑的那行结束编辑
                if (editRow != undefined) {
                    datagrid.datagrid("endEdit", editRow);
                }
                //添加时如果没有正在编辑的行，则在datagrid的第一行插入一行
                if (editRow == undefined) {
                    datagrid.datagrid("insertRow", {
                        index: 0, // index start with 0
                        row: {}
                    });
                    //将新插入的那一行开户编辑状态
                    datagrid.datagrid("beginEdit", 0);
                    //给当前编辑的行赋值
                    editRow = 0;           
                }

            }
            }, '-',
             { text: '删除', iconCls: 'icon-remove', handler: function () {
 
            	 //删除时先获取选择行
                 var rows = datagrid.datagrid("getSelections");
                 console.log(rows);
                 //选择要删除的行
                 if (rows.length > 0) {
                     $.messager.confirm("提示", "你确定要删除吗?", function (r) {
                         if (r) {
                             var ids = [];
                             for (var i = 0; i < rows.length; i++) {
                            //	 console.log(rows[i].product_id);
                                 ids.push(rows[i].id);
                             }
                             //将选择到的行存入数组并用,分隔转换成字符串，
                             //本例只是前台操作没有与数据库进行交互所以此处只是弹出要传入后台的id
                             //alert(ids.join(','));
                             
                 			$.ajax({
                   			 	url: "${path}/assist/deleteCourseTextbook",    //请求的url地址
                   			 	dataType: "json",   //返回格式为json
                   			 	async: true, //请求是否异步，默认为异步，这也是ajax重要特性
                   			 	data: { "ids": ids.join(',')},    //参数值
                   			 	//type: "jsonp",   //请求方式
                   			 	beforeSend: function() {
                      			  //请求前的处理
                   			 	},
                   			 	success: function(req) {
                   			 		if(req.status=='1'){
                   			 			datagrid.datagrid("reload");	
                   			 		}else{
                   			 			$.messager.alert("提示", req.msg,"error"); 
                   			 		}                			 		
                				},
                				complete: function(req) {
					
                				},
                				error:function(req) {
                					console.log(req);
                					$.messager.alert("警告", "删除出错","error"); 
                				}
                			});
         
                         }
                     });
                 }
                 else {
                     $.messager.alert("提示", "请选择要删除的行", "error");
                 }
             }
             }, '-',
             { text: '修改', iconCls: 'icon-edit', handler: function () {
                 //修改时要获取选择到的行
                 var rows = datagrid.datagrid("getSelections");
                 //如果只选择了一行则可以进行修改，否则不操作
                 if (rows.length == 1) {
                     //修改之前先关闭已经开启的编辑行，当调用endEdit该方法时会触发onAfterEdit事件
                     if (editRow != undefined) {
                         datagrid.datagrid("endEdit", editRow);
                     }
                     //当无编辑行时
                     if (editRow == undefined) {
                         //获取到当前选择行的下标
                         var index = datagrid.datagrid("getRowIndex", rows[0]);
                         //开启编辑
                         datagrid.datagrid("beginEdit", index);
                         //把当前开启编辑的行赋值给全局变量editRow
                         editRow = index;
                         //当开启了当前选择行的编辑状态之后，
                         //应该取消当前列表的所有选择行，要不然双击之后无法再选择其他行进行编辑
                         datagrid.datagrid("unselectAll");
                     }
                 }
             }
             },'-',
             { text: '保存', iconCls: 'icon-save', handler: function () {
                 //保存时结束当前编辑的行，自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台
                 datagrid.datagrid("endEdit", editRow);
             }
             }, '-',
             { text: '取消编辑', iconCls: 'icon-redo', handler: function () {
                 //取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行
                 editRow = undefined;
                 datagrid.datagrid("rejectChanges");
                 datagrid.datagrid("unselectAll");
             }
             }, '-'],
            onAfterEdit: function (rowIndex, rowData, changes) {
                //endEdit该方法触发此事件
                console.info(rowData);
                editRow = undefined;
                console.info(changes);  
                
                var courseTextbook=JSON.stringify(rowData);
                
                if(rowData != null){
         			$.ajax({
           			 	url: "${path}/assist/saveOrUpdateCourseTextbook",    //请求的url地址
           			 	dataType: "json",   //返回格式为json
           			 	async: true, //请求是否异步，默认为异步，这也是ajax重要特性
           			 	data: rowData,//{ "courseTextbook":courseTextbook },    //参数值
           			 	//type: "jsonp",   //请求方式
           			 	beforeSend: function() {
              			  //请求前的处理
           			 	},
           			 	success: function(req) {
           			 		if(req.status=='1'){
           			 			datagrid.datagrid("reload");	
           			 		}else{
           			 			$.messager.alert("提示", req.msg,"error"); 
           			 		}                			 		
        				},
        				complete: function(req) {
			
        				},
        				error:function(req) {
        					console.log(req);
        					$.messager.alert("警告", "修改出错","error"); 
        				}
        			})
            	
                }
                
                
                
            },
            onDblClickRow: function (rowIndex, rowData) {
            //双击开启编辑行h
                if (editRow != undefined) {
                    datagrid.datagrid("endEdit", editRow);
                }
                if (editRow == undefined) {
                    datagrid.datagrid("beginEdit", rowIndex);
                    editRow = rowIndex;
                }
            }
    	})
    //    })
     
    })
    
    
    	function open1(){
			$('#p').panel('open');
		}
		function close1(){
			$('#p').panel('close');
		}
		function load1(){
			$('#p').panel('refresh','tabs_href_test.html');
		}
    </script>
</head>
<body>
<!-- 	<table id="protable" title="测试产品" class="easyui-datagrid" style="width:850px;height:450px"
			singleSelect="true" iconCls="icon-save">
	</table>-->
	<div id="pp" class="easyui-pagination"  style="background:#efefef;border:1px solid #ccc;"
	data-options=" pageSize:20,
               pageNumber:1,
               pageList:[10,20,30],
               loading:true,"
	
	></div>  
	
<!-- 	<div style="margin:10px 0;">
		<a href="#" class="easyui-linkbutton" onclick="open1()">Open</a>
		<a href="#" class="easyui-linkbutton" onclick="close1()">Close</a>
		<a href="#" class="easyui-linkbutton" onclick="load1()">Load</a>
	</div>
	<div style="height:300px;background:#fafafa;padding:5px;">
		<div id="p" class="easyui-panel" style="width:500px;height:200px;padding:10px;"
				data-options="title:'My Panel',iconCls:'icon-save',
						collapsible:true,minimizable:true,maximizable:true,closable:true">
			<p>panel</p>
			<p>panel</p>
			<p>panel</p>
			<p>panel</p>
			<p>panel</p>
			<p>panel</p>
			<p>panel</p>
			<p>panel</p>
			<p>panel</p>
			<p>panel</p>
			<p>panel</p>
			<p>panel</p>
		</div>
	</div> -->
</body>
</html>
